<template>
  <div class="team-com" :class="{'zhuanke':zhuanke}">
    <div v-if="isNullOrEmpty(team)" class="row mt-5 ml-3">暂无医生团队</div>
    <ul v-if="!isNullOrEmpty(team)" class="row mt-4 ml-3">
      <li :key="index" v-for="(item,index) in team"
          :class="{'col' : true, 'col-12 col-sm-12 col-md-12': true, 'col-lg-6': !showNav}">
        <article class="media">
          <img class="align-self-end mr-3 ml-3 headImg" :src="getHeadUrl(item.headImg)">
          <div class="media-body">
            <div class="content">
              <p class="doctor-title">
                <span class="name">{{item.name}}</span>
                <span class="over-flow-text" v-text="item.jobTitleLabel"></span>
              </p>
              <div class="list">
                <div class="list-item">
                  <h4>
                    <span class="icon iconfont icon-icon-"></span>
                    简介
                  </h4>
                  <p class="summary shanchang over-flow-text">{{item.description}}</p>
                </div>
                <div class="list-item d-none d-sm-none d-md-block d-lg-block">
                  <h4>
                    <span class="icon iconfont icon-shixunchengji"></span>
                    擅长
                  </h4>
                  <p class="skill shanchang over-flow-text" v-text="item.skill">
                    <!--<span v-for="sc in getArray(item.skill)">{{sc}} </span>-->
                  </p>
                </div>
                <div class="list-item d-none d-sm-none d-md-block d-lg-block">
                  <h4>
                    <span class="icon iconfont icon-suohuorongyu"></span>
                    荣誉
                  </h4>
                  <p class="honor shanchang over-flow-text" v-text="item.honor">
                    <!--<span v-for="h in item.honor">{{h}} </span>-->
                  </p>
                </div>
              </div>
            </div>
            <div class="doctor-button">
              <span @click="goDetail(item)">医生详情</span>
              <span v-if="false" @click="go(company)">立即预约</span>
            </div>
          </div>
        </article>
      </li>
    </ul>
    <div class="d-flex justify-content-center">
      <navigation-com @change="onChange" :total="total"></navigation-com>
    </div>
  </div>
</template>

<script>
  import navigationCom from "@/components/navigationCom"

  export default {
    props: ['total', 'team', 'zhuanke','company', 'showNav', 'currentDepartmentId'],
    computed: {},
    data() {
      return {}
    },
    components: {
      navigationCom
    },
    mounted() {

    },
    methods: {
      go(company) {
        if (!this.isNullOrEmpty(company) && !this.isNullOrEmpty(company.qq)) {
          window.open(company.qq);
        }
      },
      goDetail(item) {
        this.$router.push({path: '/zhuanke/' + (this.currentDepartmentId > 0 ? this.currentDepartmentId : item.departmentId) + '/tuandui/' + item.id})
      },
      onChange(pagination) {
        this.$emit('change', pagination)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .team-com {
    ul, li {
      list-style: none;
    }
    ul {
      li {
        max-width: 550/@size;
        margin-bottom: 20/@size;
        .media {
          background: #F5F6F8;
          padding-right: 20/@size;
          .content {
            height: 320/@size;
            max-width: 300/@size;
          }
          .headImg {
            max-width: 262/@size;
            width: 100%;
          }
          .doctor-title {
            margin-top: 16/@size;
            margin-bottom: 14/@size;
            overflow: hidden;
            display: flex;
            span {
              font-size: 16/@size;
              color: #444444;
              letter-spacing: 0;
              font-family: MicrosoftYaHeiUI;
              -webkit-line-clamp: 1;
              min-width: 65/@size;
            }
            .name {
              font-size: 18/@size;
              margin-right: 20/@size;
              color: @icon-color;
              font-weight: bold;
            }
          }
          .list {
            .list-item {
              font-family: MicrosoftYaHeiUI;
              font-size: 16/@size;
              .iconfont {
                font-size: 18/@size;
              }
              .icon-suohuorongyu {
                font-size: 20/@size !important;
              }
              h4 {
                color: #666666;
                font-size: 16/@size;
                letter-spacing: 0;
                //line-height: 12/@size;
              }
              .margin(0, 0, 10, 0);
              h3 {
                color: #666666;
              }
              p {
                color: #444444;
                margin-bottom: 14/@size;
                height: 45/@size;
                &.summary {
                  //height: 32/@size;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                &.skill, &.honor {
                  //line-height: 1.2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
            }

          }
          .doctor-button {
            max-width: 300/@size;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-bottom: 0/@size;
            span {
              display: inline-block;
              width: 100/@size;
              height: 40/@size;
              line-height: 40/@size;
              text-align: center;
              background: #20A0FF;
              font-size: 12/@size;
              color: #fff;
              cursor: pointer;
              margin-bottom: 20/@size;
              &:last-child {
                background: #13CE66;
              }
            }
          }
        }
      }
    }
  }
  .zhuanke{
    ul {
      li {
        max-width: 100%;
        .media {
          .content {
            max-width: 100%;
          }
        }
      }
    }
  }

  @media (min-width: 992px) and (max-width: 1200px) {
    .team-com {
      ul {
        li {
          .media {
            .headImg {
              max-width: 200/@size;
            }
          }
        }
      }
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .team-com {
      ul {
        li {
          max-width: 95%;
          .media {
            .content {
              max-width: 100%;
            }
          }
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .team-com {
      ul {
        margin-left: 0 !important;
        li {
          max-width: 96%;
          .media {
            .content {
              height: 320/@size;
              max-width: 100%;
            }
            .headImg {
              max-width: 262/@size;
              width: 100%;
            }
            .doctor-title {
              margin-top: 16/@size;
              margin-bottom: 14/@size;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              span {
                font-size: @font-28;
                font-family: @font-first;
                -webkit-line-clamp: 1;
                min-width: 65/@size;
              }
              .name {
                font-size: @font-30;
                font-family: @font-title;
                margin-bottom: 10/@size;
              }
            }
            .list {
              .list-item {
                font-family: @font-first;
                font-size: @font-28;
                margin-bottom: 10/@size;
                .iconfont {
                  font-size: @font-28;
                  margin-bottom: 5/@size;
                }

                h4 {
                  font-size: @font-28;
                }
                p {
                  margin-bottom: 14/@size;
                  height: auto;
                  &.summary {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                  }
                }
              }

            }
            .doctor-button {
              justify-content: space-around;
              max-width: 100%;
              span {
                width: 140/@size;
                height: 54/@size;
                line-height: 54/@size;
                text-align: center;
                background: #20A0FF;
                font-size: 28/@size;
                color: #fff;
                cursor: pointer;
                margin-bottom: 20/@size;
              }
            }
          }

        }
      }
    }
  }


</style>
